<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample FirebaseUI App</title>
    <!-- *******************************************************************************************
       * TODO(DEVELOPER): Paste the initialization snippet from:
       * Firebase Console > Overview > Add Firebase to your web app. *
       ***************************************************************************************** -->
    <script src="https://www.gstatic.com/firebasejs/5.6.0/firebase.js"></script>


    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyDokaZQO8TkmwtU4WKGnxKNyVumD79JYW0",
            authDomain: "polar-32b0f.firebaseapp.com",
            databaseURL: "https://polar-32b0f.firebaseio.com",
            projectId: "polar-32b0f",
            storageBucket: "polar-32b0f.appspot.com",
            messagingSenderId: "919499255851"
        };
        firebase.initializeApp(config);
    </script>
    <script type="text/javascript">
        initApp = async function() {

            // FIXME: try to rewrite this using either promises or Observables.

            // I think it should use an Observable or rxjs as the state can change
            // over time and we just need to observe it as it changes.

            const user = await firebase.auth().onAuthStateChanged((user) => {
                if (user) {
                    // User is signed in.
                    var displayName = user.displayName;
                    var email = user.email;
                    var emailVerified = user.emailVerified;
                    var photoURL = user.photoURL;
                    var uid = user.uid;
                    var phoneNumber = user.phoneNumber;
                    var providerData = user.providerData;
                    user.getIdToken().then((accessToken) => {
                        document.getElementById('sign-in-status').textContent = 'Signed in';
                        document.getElementById('sign-in').textContent = 'Sign in';
                        document.getElementById('account-details').textContent = JSON.stringify({
                            displayName: displayName,
                            email: email,
                            emailVerified: emailVerified,
                            phoneNumber: phoneNumber,
                            photoURL: photoURL,
                            uid: uid,
                            accessToken: accessToken,
                            providerData: providerData
                        }, null, '  ');
                    });
                } else {
                    // User is signed out.
                    document.getElementById('sign-in-status').textContent = 'Signed out';
                    document.getElementById('sign-in').textContent = 'Sign out';
                    document.getElementById('account-details').textContent = 'null';
                }
            }, function(error) {
                console.log(error);
            });

        };

        //     firebase.auth().onAuthStateChanged((user) => {
        //         if (user) {
        //             // User is signed in.
        //             var displayName = user.displayName;
        //             var email = user.email;
        //             var emailVerified = user.emailVerified;
        //             var photoURL = user.photoURL;
        //             var uid = user.uid;
        //             var phoneNumber = user.phoneNumber;
        //             var providerData = user.providerData;
        //             user.getIdToken().then((accessToken) => {
        //                 document.getElementById('sign-in-status').textContent = 'Signed in';
        //                 document.getElementById('sign-in').textContent = 'Sign in';
        //                 document.getElementById('account-details').textContent = JSON.stringify({
        //                     displayName: displayName,
        //                     email: email,
        //                     emailVerified: emailVerified,
        //                     phoneNumber: phoneNumber,
        //                     photoURL: photoURL,
        //                     uid: uid,
        //                     accessToken: accessToken,
        //                     providerData: providerData
        //                 }, null, '  ');
        //             });
        //         } else {
        //             // User is signed out.
        //             document.getElementById('sign-in-status').textContent = 'Signed out';
        //             document.getElementById('sign-in').textContent = 'Sign out';
        //             document.getElementById('account-details').textContent = 'null';
        //         }
        //     }, function(error) {
        //         console.log(error);
        //     });
        // };

        window.addEventListener('load', async () => {
            return initApp();
        });

    </script>
</head>
<body>
<h1>Welcome to My Awesome App</h1>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<div id="account-details"></div>
</body>
</html>
